<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input type="text" placeholder="请输入人员名称或手机号" v-model="searchKeyword" />
      <button class="search-button" @click="search">搜索</button>
    </view>
    <!-- 人员列表 -->
    <view class="personnel-list">
      <view class="personnel-item" v-for="(person, index) in personnelList" :key="index">
        <view class="personnel-avatar">
          <!-- 店员头像 -->
          <image
              :src="person.agentLogo || defaultAvatar"
              mode="aspectFill"
              class="avatar-image"
              @error="handleAvatarError(person, index)"
          ></image>
          <!-- 加载中状态 -->
          <view class="avatar-loading" v-if="person.avatarLoading">
            <u-icon name="loading" size="24" color="#999"></u-icon>
          </view>
        </view>
        <view class="personnel-info">
          <view class="personnel-name">{{ person.clerkName }} </view>
          <view class="personnel-name">联系方式： {{ person.mobile }} </view>
          <view class="personnel-title">从业年限：{{ person.workingYear }}   分销员等级: {{ person.agentLevel }}  </view>
          <view class="personnel-title">服务人数：{{ person.serviceCount }}人</view>
          <view class="personnel-name" >{{ person.shopkeeper==true?'店长':'店员' }}   </view>
        </view>
        <view class="personnel-actions">
          <view class="action-icon" @click="updatePersonnel(person.id)">修改</view>
          <view class="action-icon"  @click="delPersonnel(person.id)">删除</view>
        </view>
      </view>
    </view>
    <!-- 添加按钮 -->
    <view class="add-button" @click="addPersonnel">
      <text>添加人员信息</text>
    </view>
  </view>
</template>

<script>
import { getClerkList,deleteClerk } from '@/api/store';
export default {
  data() {
    return {
      searchKeyword: '',
      goodsParams: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
        mobile:''
      },
      personnelList: [],
      defaultAvatar: 'https://picsum.photos/200/200?random=avatar' // 默认头像
    };
  },
  computed: {
  },
  onShow() {
    this.getClerkList();
  },
  // 下拉加载
  onReachBottom() {
    this.goodsParams.pageNumber++;
    this.getClerkList();
  },
  methods: {
    search(){
      this.goodsParams.mobile=this.searchKeyword
      this.getClerkList();
    },
    getClerkList(){
      getClerkList(this.goodsParams).then(res=>{
        if(res.data.code==200){
          // 处理头像加载状态
          this.personnelList = res.data.result.records.map(person => ({
            ...person,
            avatarLoading: true
          }));

          // 模拟头像加载延迟，实际项目中可移除
          setTimeout(() => {
            this.personnelList.forEach(person => {
              person.avatarLoading = false;
            });
          }, 500);
        }
        console.log(res)
      })
    },
    addPersonnel() {
      uni.navigateTo({
        url: '/pages/manage/sub/addRen'
      });
    },
    updatePersonnel(id){
      uni.navigateTo({
        url: '/pages/manage/sub/addRen?id='+id
      });
    },
    delPersonnel(id){
      let arr=[]
      arr[0]=id

      deleteClerk(arr).then(res=>{
        if(res.data.code==200){
          uni.showToast({
            title:'删除成功',
            icon:'success'
          })
          this.getClerkList()
        }
      })
    },
    // 处理头像加载错误
    handleAvatarError(person, index) {
      console.error('头像加载失败:', person.agentLogo);
      this.personnelList[index].agentLogo = this.defaultAvatar;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
.personnel-list {
  margin-bottom: 20rpx;
}
.personnel-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  padding: 10rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.personnel-item:hover {
  transform: translateY(-2rpx);
}
.personnel-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.8);
}
.personnel-info {
  flex: 1;
  min-width: 0;
}
.personnel-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personnel-title {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personnel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.action-icon {
  width: 80rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 18rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  transition: background-color 0.2s;
}
.action-icon:hover {
  background-color: #e5e5e5;
}
.add-button {
  padding: 15rpx;
  background-color: #007aff;
  color: #fff;
  text-align: center;
  border-radius: 10rpx;
  font-size: 30rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0,122,255,0.2);
}
</style>